import React from 'react';
import ReactDom from 'react-dom';
import './battle.scss';
import { api } from 'js/api/api';
import Button from 'views/component/button/button';
import utils from 'js/core/utils';
import playerStore from 'js/store/playerStore';
import './pro-bars.css';
import clientBattleHandle from './battleHandle';
import iconData from 'js/data/iconData';
import TweenOne from 'rc-tween-one';
import BezierPlugin from 'rc-tween-one/lib/plugin/BezierPlugin';
TweenOne.plugins.push(BezierPlugin);
let duration = 800;
let numberDuration = 1000;
class AnimationBox extends React.Component {
    constructor(props) {
        super(props);
        let height1 = window.fontSize * 0.4;
        let height2 = window.fontSize * 0.54;
        this.animation = [
            { top: height1, repeat: 0, duration: duration, ease: 'easeInCubic' },
            { top: 2 * height1 + height2, repeat: 0, duration: 2 * duration, ease: 'easeInCubic' },
            { top: 3 * height1 + 2 * height2, repeat: 0, duration: 2 * duration, ease: 'easeInCubic' },
            // { top: 4 * height1 + 4 * height2, repeat: 0, duration: 2 * duration, ease: 'easeInCubic' },
        ];
        this.state = {
            animationIndex: 0
        }
    }
    shouldComponentUpdate(nextProps, nextState) {
        let { moment, paused, attackPos, defendPos } = this.props;
        if (paused === nextProps.paused && moment === nextProps.moment && attackPos === nextState.attackPos && defendPos === nextState.defendPos) {
            return false;
        } else {
            return true;
        }
    }
    render() {
        let { animationIndex } = this.state;
        let { moment, paused, attackPos, defendPos } = this.props;
        return (
            <div className={"animation-box box" + attackPos + " defendbox" + defendPos} style={{ animationDuration: (duration / 1000) + 's' }}>
            </div>
        );
    }
}

class AnimationNumber extends React.Component {
    constructor(props) {
        super(props);
        this.showAnimation = { opacity: 0, repeat: 0, appearTo: numberDuration - 200, duration: 200 }
        this.numberAnimation = [
            {
                duration: numberDuration,
                bezier: {
                    type: 'soft',
                    autoRotate: false,
                    vars: [
                        { x: 10, y: -20 },
                        { x: 25, y: 0 },
                        { x: 35, y: -10 },
                        { x: 40, y: 0 },
                    ],
                },
            },
            {

                duration: numberDuration,
                bezier: {
                    type: 'soft',
                    autoRotate: false,
                    vars: [
                        { x: 10, y: -20 },
                        { x: 25, y: 0 },
                        { x: 35, y: -10 },
                        { x: 40, y: 0 },
                    ],
                }
            },
            {

                duration: numberDuration,
                bezier: {
                    type: 'quadratic',
                    autoRotate: false,
                    vars: [
                        { x: 10, y: -15 },
                        { x: 20, y: 0 },
                        { x: 30, y: -8 },
                        { x: 40, y: 0 },
                    ],
                }
            },
        ];
        this.state = {
            animationIndex: 0
        }
    }
    componentDidMount() {
        setTimeout(() => {
            this.props.node.parentNode.removeChild(this.props.node);
        }, numberDuration + 200)
    }
    render() {
        let { attackPos, defenderPos, damage } = this.props;
        return (
            <div>
                <TweenOne
                    resetStyleBool={true}
                    animation={this.numberAnimation[0]}
                    paused={false}
                    className={"animation-number attackPos" + attackPos + " defenderPos" + defenderPos}
                >{damage}</TweenOne>
            </div>
        );
    }
}

class Main extends React.Component {
    constructor(props) {
        super(props)
        let data = props.data || {};
        this.state = {
            p1: data.p1 || [],
            p2: data.p2 || [],
            msgs: [],
            end: false,
            round: 1,
            paused1: true,
            paused2: true,
            moment1: null,
            moment2: null,
            attackPos: null, defendPos: null
        }
    }
    componentDidMount() {
        // api('testBattle', (err, data) => {
        this.setState({ p1: this.state.p1, p2: this.state.p2 }, () => {
            clientBattleHandle.init(this.state.p1, this.state.p2, (data) => {
                this.setState({ round: data.round })
            }, () => {
                this.setState({ end: true, paused1: true, paused2: true, })
            });
            setTimeout(() => {
                clientBattleHandle.getBattleInfo((battleIndex, attacker, defender) => {
                    this.attack(battleIndex, attacker, defender);
                });
            }, 1000);
        });
        // })
    }
    addNumberNode = (teamId, attackPos, defenderPos, damage) => {
        this.node = document.createElement("div");
        if (teamId === 1) {
            this.refs.team2.appendChild(this.node);
        } else {
            this.refs.team1.appendChild(this.node);
        }
        ReactDom.render(
            <AnimationNumber node={this.node} attackPos={attackPos} defenderPos={defenderPos} damage={damage} />, this.node)
    }
    attack = (battleIndex, attacker, defender) => {
        let teamId = attacker.teamId;
        let fn = (timeDuration) => {
            setTimeout(() => {
                clientBattleHandle.attack((battleIndex, attacker, defender, damage, msg) => {
                    this.addNumberNode(attacker.teamId, attacker.pos, defender.pos, damage)
                    if (msg) {
                        this.state.msgs.push(msg);
                    }
                    this.setState({ msgs: this.state.msgs });
                    setTimeout(() => {
                        clientBattleHandle.getBattleInfo((battleIndex, attacker, defender, msg) => {
                            this.attack(battleIndex, attacker, defender, msg);
                        });
                    }, 200)
                });
            }, timeDuration);
        }
        // console.log(battleIndex, attacker.teamId, 'attackPos', attacker.pos, 'defendPos', defender.pos)
        if (battleIndex === 0 && attacker.teamId === 1) {
            this.setState({ paused1: true, paused2: false, attackPos: attacker.pos, defendPos: defender.pos }, () => {
                fn(duration);
            });
        } else if (battleIndex === 0 && attacker.teamId === 2) {
            this.setState({ paused1: false, paused2: true, attackPos: attacker.pos, defendPos: defender.pos }, () => {
                fn(duration);
            });
        } else if (battleIndex > 0 && attacker.teamId === 1) {
            this.setState({ paused1: true, paused2: false, attackPos: attacker.pos, defendPos: defender.pos }, () => {
                fn(2 * duration);
            });
        } else if (battleIndex > 0 && attacker.teamId === 2) {
            this.setState({ paused1: false, paused2: true, attackPos: attacker.pos, defendPos: defender.pos }, () => {
                fn(2 * duration);
            });
        }
    }
    getHpWidth = (role) => {
        let hp = role.hp > 0 ? role.hp : 0;
        return (hp / role.maxHp * 100) + '%';
    }
    leave = () => {
        this.props.close();
    }
    getShield = (role) => {
        let shield = role.shield;
        let currentShield = role.currentShield;
        let node = [];
        for (let i = 0; i < shield; i++) {
            if (currentShield > 0) {
                node.unshift(<div className="shield-item flex-g-1 active" key={i}></div>)
            } else {
                node.unshift(<div className="shield-item flex-g-1" key={i}></div>)
            }
            currentShield -= 1;
        }
        return node;
    }
    animation = () => {
        this.setState({ paused: !this.state.paused })
    }
    render() {
        let { p1, p2, msgs, round, end, paused1, paused2, attackPos, defendPos } = this.state;
        let msgNode = msgs.map((item, i) => {
            return <div key={i}>{item}</div>
        });
        return <div id="battle" className="flex-col">
            <div className="round-text">第{round}回合</div>
            <div className="flex inline-flex jc-around battleBody">
                <div className="team" ref="team1" onClick={this.animation}>
                    {paused1 === false && attackPos === 0 && <AnimationBox paused={paused1} attackPos={attackPos} defendPos={defendPos} key={0} />}
                    {paused1 === false && attackPos === 1 && <AnimationBox paused={paused1} attackPos={attackPos} defendPos={defendPos} key={1} />}
                    {paused1 === false && attackPos === 2 && <AnimationBox paused={paused1} attackPos={attackPos} defendPos={defendPos} key={2} />}
                    {p1.map((role, i) => {
                        if (role) {
                            return <div className="role" key={i}>
                                <div className={"hp-par" + ((i === attackPos && paused2 === false) ? ' l-active' : '')}>
                                    <div className="flex shield">
                                        {this.getShield(role)}
                                    </div>
                                    <div className="hp-content flex-center">
                                        <div className="hp-out">
                                            <div className="hp" style={{ width: this.getHpWidth(role) }}></div>
                                            <div className="hp-text">{role.hp}/{role.maxHp}</div>
                                        </div>
                                    </div>
                                    <div className="role-name flex-center">
                                        <div className={"icon fonts-" + iconData[role.templateId]}></div>
                                        {role.name}
                                    </div>
                                </div>
                            </div>
                        } else {
                            return <div className="role" key={i}></div>
                        }

                    })}
                </div>
                <div className="team" ref="team2">
                    {paused1 === true && attackPos === 0 && <AnimationBox paused={paused2} attackPos={attackPos} defendPos={defendPos} key={0} />}
                    {paused1 === true && attackPos === 1 && <AnimationBox paused={paused2} attackPos={attackPos} defendPos={defendPos} key={1} />}
                    {paused1 === true && attackPos === 2 && <AnimationBox paused={paused2} attackPos={attackPos} defendPos={defendPos} key={2} />}
                    {p2.map((role, i) => {
                        return <div className="role" key={i}>
                            <div className={"hp-par" + ((i === attackPos && paused1 === false) ? ' r-active' : '')}>
                                <div className="flex shield">
                                    {this.getShield(role)}
                                </div>
                                <div className="hp-content flex-center">
                                    <div className="hp-out">
                                        <div className="hp-text">{role.hp}/{role.maxHp}</div>
                                        <div className="hp" style={{ width: this.getHpWidth(role) }}></div>
                                    </div>
                                </div>
                                <div className="role-name">{role.name}</div>
                            </div>
                            {/* <div className="role-status">状态</div> */}
                        </div>
                    })}
                </div>
            </div>
            <div className="battleMsg  scroll-absolute text-center flex-g-1">
                <div className="battleMsgContent">
                    {msgNode}
                </div>
            </div>
            <div className="bottom flex-center">
                <div className="leave-button" onClick={this.leave}>离开</div>
            </div>
        </div>
    }
}

export default Main;